<template>
  <div class="health-records-container">
    <!-- 提交表单状态 -->
    <div v-if="!submitted" class="input-form">
      <div class="health-records-header">
        <h2>{{ $t('healthRecord.uploadTitle') }}</h2>
      </div>
      
      <div class="record-input-wrapper">
        <div class="form-container">
          <div class="form-row">
            <!-- 左侧列 -->
            <div class="form-col">
              <!-- 身高 -->
              <div class="form-group">
                <label class="required">{{ $t('healthRecord.height') }}</label>
                <div class="input-group">
                  <button type="button" @click="decrement('height')">-</button>
                  <input type="number" v-model.number="formData.height" min="0" step="0.01">
                  <button type="button" @click="increment('height')">+</button>
                </div>
              </div>
              
              <!-- 体重 -->
              <div class="form-group">
                <label class="required">{{ $t('healthRecord.weight') }}</label>
                <div class="input-group">
                  <button type="button" @click="decrement('weight')">-</button>
                  <input type="number" v-model.number="formData.weight" min="0" step="0.1">
                  <button type="button" @click="increment('weight')">+</button>
                </div>
              </div>
              
              <!-- 血压 -->
              <div class="form-group">
                <label class="required">{{ $t('healthRecord.bloodPressure') }}</label>
                <div class="input-group">
                  <button type="button" @click="decrement('bloodPressure')">-</button>
                  <input type="number" v-model.number="formData.bloodPressure" min="0">
                  <button type="button" @click="increment('bloodPressure')">+</button>
                </div>
              </div>
              
              <!-- 心率 -->
              <div class="form-group">
                <label class="required">{{ $t('healthRecord.heartRate') }}</label>
                <div class="input-group">
                  <button type="button" @click="decrement('heartRate')">-</button>
                  <input type="number" v-model.number="formData.heartRate" min="0">
                  <button type="button" @click="increment('heartRate')">+</button>
                </div>
              </div>
            </div>
            
            <!-- 右侧列 -->
            <div class="form-col">
              <!-- 血糖 -->
              <div class="form-group">
                <label class="required">{{ $t('healthRecord.bloodSugar') }}</label>
                <div class="input-group">
                  <button type="button" @click="decrement('bloodSugar')">-</button>
                  <input type="number" v-model.number="formData.bloodSugar" min="0" step="0.1">
                  <button type="button" @click="increment('bloodSugar')">+</button>
                </div>
              </div>
              
              <!-- 胆固醇 -->
              <div class="form-group">
                <label class="required">{{ $t('healthRecord.cholesterol') }}</label>
                <div class="input-group">
                  <button type="button" @click="decrement('cholesterol')">-</button>
                  <input type="number" v-model.number="formData.cholesterol" min="0" step="0.1">
                  <button type="button" @click="increment('cholesterol')">+</button>
                </div>
              </div>
              
              <!-- 视力 -->
              <div class="form-group">
                <label class="required">{{ $t('healthRecord.vision') }}</label>
                <div class="input-group">
                  <button type="button" @click="decrement('vision')">-</button>
                  <input type="number" v-model.number="formData.vision" min="0" step="0.1">
                  <button type="button" @click="increment('vision')">+</button>
                </div>
              </div>
              
              <!-- BMI -->
              <div class="form-group">
                <label class="required">{{ $t('healthRecord.bmi') }}</label>
                <div class="input-group">
                  <button type="button" disabled>-</button>
                  <input type="number" v-model.number="formData.bmi" min="0" step="0.1" readonly>
                  <button type="button" disabled>+</button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="form-actions">
            <button type="button" class="submit-btn" @click="submitForm">
              {{ $t('healthRecord.submitBtn') }}
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 结果显示状态 -->
    <div v-else class="result-display">
      <div class="result-header">
        <h2>{{ $t('healthRecord.bodyInfoTitle') }}</h2>
      </div>
      
      <div class="result-content">
        <div class="result-item">
          <span class="result-label">{{ $t('healthRecord.resultLabels.weight') }}</span>
          <span class="result-value">{{ formData.weight }}{{ $t('healthRecord.units.kg') }}</span>
        </div>
        <div class="result-item">
          <span class="result-label">{{ $t('healthRecord.resultLabels.height') }}</span>
          <span class="result-value">{{ formData.height }}m</span>
        </div>
        <div class="result-item">
          <span class="result-label">{{ $t('healthRecord.resultLabels.bmi') }}</span>
          <span class="result-value">{{ formData.bmi.toFixed(2) }}</span>
        </div>
        <div class="result-item">
          <span class="result-label">{{ $t('healthRecord.resultLabels.bloodSugar') }}</span>
          <span class="result-value">{{ formData.bloodSugar }}mmol/L</span>
        </div>
        <div class="result-item">
          <span class="result-label">{{ $t('healthRecord.resultLabels.bloodPressure') }}</span>
          <span class="result-value">{{ formData.bloodPressure }}mmHg</span>
        </div>
        <div class="result-item">
          <span class="result-label">{{ $t('healthRecord.resultLabels.cholesterol') }}</span>
          <span class="result-value">{{ formData.cholesterol }}mmol/L</span>
        </div>
        <div class="result-item">
          <span class="result-label">{{ $t('healthRecord.resultLabels.heartRate') }}</span>
          <span class="result-value">{{ formData.heartRate }}times/min</span>
        </div>
        <div class="result-item">
          <span class="result-label">{{ $t('healthRecord.resultLabels.vision') }}</span>
          <span class="result-value">{{ formData.vision }}degree</span>
        </div>
      </div>
      
      <button @click="resetForm" class="back-btn">
          {{ $t('healthRecord.backBtn') }}
      </button>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      submitted: false,
      formData: {
        height: 1.8,
        weight: 50,
        bloodPressure: 20,
        bloodSugar: 20,
        heartRate: 80,
        cholesterol: 15.0,
        vision: 200,
        bmi: 15.43
      }
    };
  },
  watch: {
    'formData.height': 'calculateBMI',
    'formData.weight': 'calculateBMI'
  },
  methods: {
    increment(field) {
      const step = this.getStepSize(field);
      this.formData[field] = parseFloat((this.formData[field] + step).toFixed(2));
    },
    decrement(field) {
      const step = this.getStepSize(field);
      const newValue = this.formData[field] - step;
      this.formData[field] = parseFloat((newValue > 0 ? newValue : 0).toFixed(2));
    },
    getStepSize(field) {
      switch(field) {
        case 'height': return 0.01;
        case 'weight': 
        case 'bloodSugar':
        case 'cholesterol':
        case 'vision':
        case 'bmi': return 0.1;
        default: return 1;
      }
    },
    calculateBMI() {
      if (this.formData.height > 0) {
        this.formData.bmi = parseFloat(
          (this.formData.weight / (this.formData.height * this.formData.height)).toFixed(2)
        );
      } else {
        this.formData.bmi = 0;
      }
    },
    submitForm() {
      this.submitted = true;
    },
    resetForm() {
      this.submitted = false;
    }
  }
};
</script>

<style scoped>
.health-records-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 表单样式 */
.health-records-header {
  text-align: center;
  margin-bottom: 30px;
}

.health-records-header h2 {
  color: #2d3748;
  font-weight: 600;
}

.record-input-wrapper {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(26, 115, 232, 0.1);
  margin-bottom: 30px;
  border: 1px solid #e3f2fd;
}

.form-container {
  max-width: 700px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  margin-bottom: 20px;
}

.form-col {
  flex: 1;
  padding: 0 15px;
}

.form-group {
  margin-bottom: 25px;
}

label.required {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #2d3748;
}

label.required::after {
  content: '*';
  color: #e53935;
  margin-left: 4px;
}

.input-group {
  display: flex;
  align-items: center;
}

.input-group input {
  flex: 1;
  padding: 12px;
  border: 1px solid #bbdefb;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
  color: #2d3748;
}

.input-group input:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 5px rgba(26, 115, 232, 0.2);
}

.input-group input[readonly] {
  background-color: #f5f9fc;
  cursor: not-allowed;
}

.input-group button {
  width: 40px;
  height: 40px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
}

.input-group button:disabled {
  background-color: #bbdefb;
  cursor: not-allowed;
}

.input-group button:hover:not(:disabled) {
  background-color: #1976D2;
}

.input-group button:first-child {
  margin-right: 10px;
}

.input-group button:last-child {
  margin-left: 10px;
}

.form-actions {
  text-align: center;
  margin-top: 30px;
}

.submit-btn {
  padding: 12px 30px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover {
  background-color: #1976D2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 结果展示样式 */
.result-display {
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(26, 115, 232, 0.1);
  border: 1px solid #e3f2fd;
}

.result-header {
  text-align: center;
  margin-bottom: 30px;
}

.result-header h2 {
  color: #2196F3;
  font-weight: 600;
  font-size: 24px;
}

.result-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}

.result-label {
  font-weight: 500;
  color: #555;
}

.result-value {
  color: #333;
  font-weight: 500;
}

.result-actions {
  text-align: center;
}

.back-btn {
  padding: 12px 30px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.back-btn:hover {
  background-color: #1976D2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }
  
  .form-col {
    padding: 0;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
}
</style>